<template>
	<div>

		<div class="bg">
			<image class="imgBg" src="https://yzzh.4v745x.cn/images/login/login.png" mode="widthFix" />
			<image src="../../static/img/index_top.png" mode="aspectFit" class="topIcons" />
			<div class="topTitle">欢迎登录~</div>
			<div class="content">
				<div class="account contentItem">
					<img src="../../static/img/index_accout.png" alt="" class="inputIncon">
					<input type="text" placeholder="请输入账号" placeholder-class="inputP" v-model="form.account">
				</div>
				<div class="password contentItem">
					<img src="../../static/img/index_suo.png" alt="" class="inputIncon">
					<input type="text" v-if="inputType == 'text'" placeholder-class="inputP" placeholder="请输入密码"
						v-model="form.password">
					<input type="password" v-else placeholder-class="inputP" placeholder="请输入密码"
						v-model="form.password">
					<div class="imgBox" @click="toOpen('password')" v-if="inputType == 'text'">
						<img src="../../static/img/index_eyeO.png" alt="" class="pswIcons">
					</div>
					<div @click="toOpen('text')" class="imgBox" v-if="inputType == 'password'">
						<img src="../../static/img/index_eyeC.png" alt="" class="pswIcons">
					</div>

				</div>

			</div>
			<div class="btn">
				<div @click="toLogin">登录</div>
			</div>
		</div>

		<!-- 弹框 -->
		<dialogs ref="dialog" :datas="datas" :type="'info'">

		</dialogs>
		<nonamedialogs ref="nonamedialogs" :datas="datas">

		</nonamedialogs>
	</div>
</template>

<script>
	import {
		login,
		decode,
		auth
	} from '@/utils/http'
	import nonamedialogs from "@/components/userdialog.vue"

	import dialogs from "@/components/inputdialog.vue";
	export default {
		components: {
			dialogs,
			nonamedialogs
		},
		data() {
			return {
				inputType: 'password',
				isUse: true,
				datas: {},
				form: {
					// "account": "",
					// "password": "",
					"account": "",
					"password": "",
					code: ''
				}
			};
		},
		onShow() {
			uni.hideTabBar()
			wx.removeStorageSync('isToInfo')
			wx.removeStorageSync('isToXq')
			if (uni.getStorageSync('zh')) {
				this.form = uni.getStorageSync('zh')
			}
			// this.$refs.nonamedialogs.$refs.inputDialog.open();

		},
		methods: {
			// 登录
			toLogin() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none',
						duration: 2000
					})
					return

				}

				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					})
					return
				}

				if (this.isUse) {

					uni.showLoading({
						title: "登录中",
						mask: true
					});
					var that = this
					that.isUse = false;
					uni.login({
						provider: "weixin",
						success: async function(loginRes) {
							that.form.code = loginRes.code
							login(that.form).then(res => {
								if (res.code == 0) {
									uni.setStorageSync('zh', that.form)

									that.isUse = true;
									uni.setStorageSync('openid', res.result.openId)
									uni.setStorageSync("userInfo", res.result);
									if (res.result.role == 'admin' || res.result.role ==
										'administrator') {
										let form = {
											openId: uni.getStorageSync('openid'),
											userId: uni.getStorageSync('userInfo').userId,
											name: ''
										}
										that.toAuth(form)

									}
									if (res.result.role != 'admin' && res.result.role !=
										'administrator') {
										if (res.result.name == '') {
											that.$refs.dialog.$refs.inputDialog.open();

										} else {
											let form = {
												openId: uni.getStorageSync('openid'),
												userId: uni.getStorageSync('userInfo').userId,
												name: uni.getStorageSync('userInfo').name
											}
											that.toAuth(form)
										}

									}
									uni.hideLoading();
									that.isUse = true;

								} else {
									that.isUse = true;

									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000,

									})
									setTimeout(() => {
										uni.hideLoading();
										that.isUse = true;
									}, 2000)
								}
							}).finally(() => {
								this.isUse = true;

							})

						},
					});


				}

			},
			toAuth(form) {
				auth(form).then(a => {
					if (a.code == '0') {
						uni.setStorageSync('token', a.token)
						this.isUse = true
						if (uni.getStorageSync('userInfo').role == 'admin' || uni.getStorageSync('userInfo')
							.role == 'administrator') {
							uni.reLaunch({
								url: '/pages/order/managerIndex'
							})
						} else {
							uni.reLaunch({
								url: '/pages/order/index'
							})
						}
					}
				}).finally(() => {
					this.isUse = true

				})
			},
			toOpen(val) {
				this.inputType = val

				this.$nextTick(() => {})
			},
		}
	};
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;

		height: 100vh;
		position: relative;

		.topIcons {
			position: absolute;
			width: 138rpx;
			height: 138rpx;
			top: 349rpx;
			z-index: 1;
			left: 97rpx;
		}

		.topTitle {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			text-align: left;
			font-style: normal;
			position: absolute;
			top: 533rpx;
			left: 110rpx;
			z-index: 1;

		}

		.imgBox {
			position: absolute;
			right: -15rpx;
			top: -20rpx;
			padding: 20rpx;
			z-index: 20;
		}

		.pswIcons {
			width: 30rpx;
			height: 20rpx;

		}

		.imgBg {
			// display: inline-block;
			position: absolute;
			width: 100vw;
			height: 100vh;
			z-index: 0;
		}

		.inputIncon {
			width: 40rpx;
			height: 50rpx;
		}

		input {
			border-bottom: 2rpx solid #FFFFFF;
			width: 476rpx;
			margin-left: 20rpx;
			padding: 0rpx 40rpx 10rpx 18rpx;
			color: #fff !important;

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 22rpx;
		}

		.inputP {
			color: red !important;
			/* 将颜色代码修改为需要的颜色 */
		}

		.content {
			position: relative;
			top: 692rpx;
			box-sizing: border-box;
			padding: 0rpx 90rpx;

			.contentItem {
				display: flex;
				position: absolute;
			}

			.password {
				margin-top: 88rpx;
			}
		}

	}

	.btn {
		width: 570rpx;
		text-align: center;
		background: white;
		color: #5C7FF5;
		box-sizing: border-box;
		padding: 13rpx 0rpx;
		position: relative;
		top: 1002rpx;
		margin: 0 auto;
		border-radius: 40rpx;

		div {
			font-weight: bold;
			font-size: 36rpx;
		}
	}
</style>
<style scoped>
	input>>>.inputP {
		color: #fff !important;
		opacity: .8;

		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 22rpx;
		font-style: normal;
	}
</style>